<template>
  <div style="display: flex; margin-left: 25px">
    <div>
      <div class="item_1">
        <span style="color: rgb(173, 233, 246)">TAT</span>
        <span style="font-weight: 600; font-size: 18px">+16c</span>
        <span style="color: #00dd00; font-weight: 600; margin-left: 40px">TO</span>
      </div>
      <div class="item_2">
        <DashBoard :indicate="N1" />
        <span style="color: rgb(173, 233, 246); margin-top: 100px">N1</span>
        <DashBoard :indicate="N1" />
      </div>
      <div class="item_3">
        <EGT :indicate="EGT_Index" />
        <span style="color: rgb(173, 233, 246); margin-top: 100px">EGT</span>
        <EGT :indicate="EGT_Index" />
      </div>
      <Indicator :indicate="N2" params="N2" :warningLine="110" :speed="5" />
      <Indicator :indicate="fuelFlow / 50" params="FF" :speed="2000" :warningLine="1000000" />
      <Indicator :indicate="fuelFlow / 9" :precision="0" params="OLI&nbsp;&nbsp;PRESS" :speed="100" :warningLine="86" />
      <Indicator :indicate="fuelFlow / 8" :precision="0" params="OLI&nbsp;&nbsp;TEMP" :speed="80" :warningLine="96" />
      <Indicator params="OLI&nbsp;&nbsp;QTY" :indicate="17" :warningLine="10000" />
      <Indicator params="VIB" :indicate="vib" :warningLine="10000" />
    </div>
    <div>
      <WarningWindow :show="showEngineWarn" />
      <div class="gear_view" :style="gearStyles">{{ gear }}</div>
      <span style="display: block; margin-left: 210px; color: rgb(173, 233, 246)">GEAR</span>
      <Flaps ref="flapsRef" />
    </div>
  </div>
</template>

<script setup>
import DashBoard from '@/views/learning/simulator/components/upper/view/DashBoard.vue'
import WarningWindow from '@/views/learning/simulator/components/upper/view/WarningWindow.vue'
import EGT from '@/views/learning/simulator/components/upper/view/EGT.vue'
import Flaps from '@/views/learning/simulator/components/upper/view/Flaps.vue'
import { ref, onMounted, onBeforeUnmount, computed } from 'vue'
import Indicator from '@/views/learning/simulator/components/upper/view/Indicator.vue'
const fuelFlow = ref(0)
const N1 = ref(0)
const EGT_Index = ref(0)
const N2 = ref(0)
const vib = ref(0)
const gear = ref('DOWN')
const color = ref('rgb(155, 255, 134)')
const flapsRef = ref(null)
const showEngineWarn = ref(true)
let gearFlag = true //起落架状态，默认为true，即收上

onMounted(() => {
  window.addEventListener('keydown', handleKeydown) // 在组件挂载时添加键盘事件监听
  window.addEventListener('keyup', handleKeyup)
})

onBeforeUnmount(() => {
  window.removeEventListener('keydown', handleKeydown) // 在组件销毁时移除事件监听
  window.removeEventListener('keyup', handleKeyup)
})

const gearStyles = computed(() => {
  return {
    border: `3px solid ${color.value}`,
    color: color.value
  }
})

const handleKeyup = () => {
  //防止发动机过热
  fuelFlow.value = fuelFlow.value > 700 ? 700 : fuelFlow.value
  caculator()
}

const handleKeydown = (event) => {
  // 阻止浏览器默认行为
  event.preventDefault();

  // 将按键转换为大写字母
  const key = event.key.toUpperCase();

  const keyActions = {
    F3: addFuel, // 按 F3 时调用增加燃料
    F2: minusFuel, // 按 F2 时调用减少燃料
    F1: setToIdle,
    F4: setToMax,
    F5: () => {
      flapsRef.value.setFlapsIndicate('F5')
    },
    F6: () => flapsRef.value.setFlapsIndicate('F6'),
    F7: () => flapsRef.value.setFlapsIndicate('F7'),
    F8: () => flapsRef.value.setFlapsIndicate('F8'),
    F9: stop, // 关车
    G: () => {
      gearFlag = !gearFlag
      color.value = 'rgb(255,0,0)'
      setTimeout(() => {
        color.value = gearFlag ? 'rgb(155, 255, 134)' : '#202127'
      }, 2000)
    }
  }

  // 如果按键有对应的动作，则执行
  if (keyActions[key]) {
    keyActions[key]()
  }
}


const stop = () => {
  showEngineWarn.value = true
  fuelFlow.value = 0
  N1.value = 0
  N2.value = 0
  EGT_Index.value = 0
  vib.value = 0
}
const addFuel = () => {
  showEngineWarn.value = false
  if (fuelFlow.value < 770) {
    fuelFlow.value += 14
  }
  caculator()
}

const minusFuel = () => {
  showEngineWarn.value = false
  if (fuelFlow.value > 140) {
    fuelFlow.value -= 14
  }
  caculator()
}

const setToIdle = () => {
  showEngineWarn.value = false
  fuelFlow.value = 140
  caculator()
}

const setToMax = () => {
  showEngineWarn.value = false
  fuelFlow.value = 770
  caculator()
}

/**
 * 通过燃油流量计算N1
 */
const caculator = () => {
  N1.value = fuelFlow.value / 7
  vib.value = N1.value == 0 ? 0 : 0.2
  if (fuelFlow.value <= 140) {
    EGT_Index.value = ((fuelFlow.value / 770) * 1023 * 379) / 186
    N2.value = (fuelFlow.value / 7) * 2.9
  } else {
    EGT_Index.value = (fuelFlow.value / 770) * 1023
    N2.value = fuelFlow.value / 7
  }
}
</script>

<style scoped>
.item_1 {
  height: 50px;
}

.item_2 {
  display: flex;
  margin-top: -40px;
  width: 250px;
  justify-content: space-between;
}

.item_3 {
  display: flex;
  margin-top: -30px;
  width: 250px;
  justify-content: space-between;
  padding: 0;
  border: none;
}

.gear_view {
  margin-left: 200px;
  border-radius: 5px;
  width: 60px;
  height: 25px;
  display: flex;
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
}
</style>
